<!--
    This page contains the form "Generalities Building"
    with generales informations about the building
-->

<script>
    var failureMessageYearOfBuild = "<?php echo TXT_FAILURE_CHOOSE_YEAR_OF_BUILD; ?>";
    var failureMessageCannotBeEmpty = "<?php echo TXT_FAILURE_CANNOT_BE_EMPTY; ?>";
</script>

<p id="subtitle"><?php echo TXT_BUILDING; ?></p>

<div style="background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">

    <table id="generalitiesBuildingTab">
        <tr>
            <th class="paddingCell" style="text-align: left;  vertical-align: top; padding-top: 30px;">
                <?php echo TXT_BUILT_YEAR; ?>
            </th>
            <td style=" padding-top: 30px;">
                <input type="number" name="year" class="changeArea inputNumberField4" id="builtYear"  onkeyup="generalities[0].processValidation()" onblur="updateProgressBar()"/>
            </td>
            <td style="width:50%; padding-top: 30px;" id="div_BuiltYear_errorMessage"></td>
        </tr>    
        <tr>
            <th class="paddingCell" style="text-align: left; vertical-align: top;">
                <?php echo TXT_NUMBER_OF_FLOORS; ?>
            </th>
            <td>
                <input type="number" class="changeArea inputNumberField4" name="floorsOccupied" id="floorsOccupied" onkeyup="generalities[1].processValidation()" onchange="calculate();" onblur="updateProgressBar();" onkeyup="generalities[1].processValidationOnKeyUp();" />
            </td>
            <td id="div_floorsOccupied_errorMessage"></td>
        </tr>
        <tr>
            <th class="paddingCell" style="text-align: left;  vertical-align: top;">
                <?php echo TXT_BALCONY; ?>
            </th>
            <td>
                <input type="radio" name="balcony" value="true" checked> <?php echo TXT_YES; ?>
                <input type="radio" name="balcony" value="false"> <?php echo TXT_NO; ?>
            </td>
            <td></td>
        </tr>
        <tr>
            <th class="paddingCell" style="text-align: left;  vertical-align: top;">
                <?php echo TXT_EAVE; ?>
            </th>
            <td>
                <input type="radio" name="eaves" value="true" checked> <?php echo TXT_YES; ?>
                <input type="radio" name="eaves" value="false"> <?php echo TXT_NO; ?>
            </td>
            <td></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var year = document.getElementById('builtYear');
                    
    var percentageNorth = 18;
    var valueNorth = null;
    var valueM2North = null;
    var percentageSouth = 26;
    var valueSouth = null;
    var valueM2South = null;
    var percentageEast = 21;
    var valueEast = null;
    var valueM2East = null;
    var percentageWest = 20;
    var valueWest = null;
    var valueM2West = null;
                    
    $('.changeArea').live('change', function() {                    
        //Set the percentage of window by the year
        var percentageWindow = null;
                    
        if(year.value <= 1949){
            percentageWindow = 18;
        }
        if(year.value >= 1990){
            percentageWindow = 19;
        }
        if(year.value >= 1950 && year.value <= 1989){
            percentageWindow = 23;
        }
                        
        //Set the value of each directions
        valueNorth = (percentageWindow * percentageNorth)/100;
        valueSouth = (percentageWindow * percentageSouth)/100;
        valueEast = (percentageWindow * percentageEast)/100;
        valueWest = (percentageWindow * percentageWest)/100;
                    
        //Set the measure of each directions
        var wallsNorth, wallsSouth, wallsEast, wallsWest;
        var orientationA = document.getElementById('selectOrientation').value;
        var shape = $('input[name=shape]:checked', '#gen').val();
                        
        if(shape == 1){//Carré
            wallsNorth = document.getElementById('inputareaWallA').value;
            wallsEast = document.getElementById('inputareaWallA').value;
            wallsSouth = document.getElementById('inputareaWallA').value;
            wallsWest = document.getElementById('inputareaWallA').value;
        }
        if(shape == 2){//Rectangle
            if(orientationA == "Nord" || orientationA == "Sud"){
                wallsNorth = document.getElementById('inputareaWallA').value;
                wallsEast = document.getElementById('inputareaWallB').value;
                wallsSouth = document.getElementById('inputareaWallA').value;
                wallsWest = document.getElementById('inputareaWallB').value;
            }
            if(orientationA == "Est" || orientationA == "Ouest"){
                wallsNorth = document.getElementById('inputareaWallB').value;
                wallsEast = document.getElementById('inputareaWallA').value;
                wallsSouth = document.getElementById('inputareaWallB').value;
                wallsWest = document.getElementById('inputareaWallA').value;
            }
        }
        if(shape == 3){//L
            if(orientationA == "Nord" || orientationA == "Sud"){
                wallsNorth = document.getElementById('inputareaWallB').value;
                wallsEast = document.getElementById('inputareaWallC').value;
                wallsSouth = document.getElementById('inputareaWallB').value;
                wallsWest = document.getElementById('inputareaWallC').value;
            }
            if(orientationA == "Est" || orientationA == "Ouest"){
                wallsNorth = document.getElementById('inputareaWallC').value;
                wallsEast = document.getElementById('inputareaWallB').value;
                wallsSouth = document.getElementById('inputareaWallC').value;
                wallsWest = document.getElementById('inputareaWallB').value;
            }
        }
        if(shape == 4){//U
            if(orientationA == "Nord" || orientationA == "Sud"){
                wallsNorth = document.getElementById('inputareaWallA').value;
                wallsEast = document.getElementById('inputareaWallD').value;
                wallsSouth = document.getElementById('areaWallA').value;
                wallsWest = document.getElementById('areaWallD').value;
            }
            if(orientationA == "Est" || orientationA == "Ouest"){
                wallsNorth = document.getElementById('inputareaWallD').value;
                wallsEast = document.getElementById('inputareaWallA').value;
                wallsSouth = document.getElementById('inputareaWallD').value;
                wallsWest = document.getElementById('inputareaWallA').value;
            }
        }
        if(shape == 5){//Z
            if(orientationA == "Nord" || orientationA == "Sud"){
                wallsNorth = document.getElementById('inputareaWallA') + document.getElementById('inputareaWallD');
                wallsEast = document.getElementById('inputareaWallB') + document.getElementById('inputareaWallC');
                wallsSouth = document.getElementById('inputareaWallA') + document.getElementById('inputareaWallD');
                wallsWest = document.getElementById('inputareaWallB') + document.getElementById('inputareaWallC');
            }
            if(orientationA == "Est" || orientationA == "Ouest"){
                wallsNorth = document.getElementById('inputareaWallB') + document.getElementById('inputareaWallC');
                wallsEast = document.getElementById('inputareaWallA') + document.getElementById('inputareaWallD');
                wallsSouth = document.getElementById('inputareaWallB') + document.getElementById('inputareaWallC');
                wallsWest = document.getElementById('inputareaWallA') + document.getElementById('inputareaWallD');
            }
        }
        if(shape == 6){//T
            if(orientationA == "Nord" || orientationA == "Sud"){
                wallsNorth = document.getElementById('inputareaWallA') + document.getElementById('inputareaWallB');
                wallsEast = document.getElementById('inputareaWallD');
                wallsSouth = document.getElementById('inputareaWallA') + document.getElementById('inputareaWallB');
                wallsWest = document.getElementById('inputareaWallD');
            }
            if(orientationA == "Est" || orientationA == "Ouest"){
                wallsNorth = document.getElementById('inputareaWallD');
                wallsEast = document.getElementById('inputareaWallA') + document.getElementById('inputareaWallB');
                wallsSouth = document.getElementById('inputareaWallD');
                wallsWest = document.getElementById('inputareaWallA') + document.getElementById('inputareaWallB');
            }
        }
                        
        valueM2North = wallsNorth * valueNorth;
        valueM2South = wallsSouth * valueSouth;
        valueM2East = wallsEast * valueEast;
        valueM2West = wallsWest * valueWest;
                    
        //Display values & measures of each directions
        document.getElementById('areaWindowNorth').value = valueNorth;
        document.getElementById('areaWindowEast').value = valueEast;
        document.getElementById('areaWindowSouth').value = valueSouth;
        document.getElementById('areaWindowWest').value = valueWest;
                            
        document.getElementById('measureWindowNorth').value = valueM2North;
        document.getElementById('measureWindowEast').value = valueM2East;
        document.getElementById('measureWindowSouth').value = valueM2South;
        document.getElementById('measureWindowWest').value = valueM2West;
    });
</script>